<template>
  <k-view class="diagnosis-line-chart">
    <k-view class="diagnosis-line-chart-image" id="chart"> </k-view>
    <k-view class="diagnosis-line-chart-text">
      <k-text class="gray-text">{{ startDate }}</k-text>
      <k-text class="gray-text">{{ endDate }}</k-text>
    </k-view>
  </k-view>
</template>

<script>
import { getCompanyHistory } from '@/apis';
import Apis from '@king-fisher/apis';
import { changeStringIntoDate, errorReport } from '@/utils';
export default {
  props: {
    block_type: {
      type: String,
      default: 'industry',
    },
    block_code: {
      type: String,
      default: '882019',
    },
  },
  data() {
    return {
      option: {
        data: [
          {
            originData: [],
          },
        ],
        grid: [
          {
            top: '0%',
            left: '0%',
            right: '0%',
            bottom: '0%',
          },
        ],
        series: [
          {
            type: 'line',
            $dataIndex: 0,
            dataKey: 'x',
            name: '历史得分',
            line: {
              show: true,
              style: {
                normal: {
                  stroke: '#3366ff',
                },
              },
            },
            area: {
              show: true,
              snapToBottom: true,
              style: {
                normal: {
                  fill: {
                    y2: 1,
                    x2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#3366ff',
                      },
                      {
                        offset: 1,
                        color: '#ffffff',
                      },
                    ],
                  },
                  opacity: 0.1,
                },
              },
            },
          },
        ],
        dataZoom: [{}],
        axis: [
          {
            position: 'bottom',
            type: 'point',
            $dataIndex: 0,
            $dataZoomIndex: 0,
            dataKey: 'date',
            barGap: '20%',
            paddingInner: '60%',
            paddingOuter: '40%',
            intervalLength: 37,
            line: {
              show: false,
              style: {
                stroke: 'rgba(0, 0, 0, 0.1)',
                lineWidth: '0',
              },
            },
            splitLine: {
              show: false,
              style: {
                color: 'rgba(51, 51, 51, 0.1)',
                lineWidth: 1,
              },
            },
          },
          {
            position: 'left',
            type: 'linear',
            xOrY: 'y',
            min: 0,
            max: 100,
            splitNumber: 5,
            line: {
              show: false,
              style: {
                stroke: 'rgba(51, 51, 51, 0.1)',
                lineWidth: '0',
              },
            },
            splitLine: {
              show: false,
              style: {
                color: 'rgba(51, 51, 51, 0.1)',
                lineWidth: '0.5',
              },
            },
          },
        ],
        textStyle: {
          fill: '#9B9B9B',
          fontFamily: 'SFUIText-Regular',
          fontSize: 12,
          fontStyle: 'normal',
          fontWeight: 'normal',
        },
      },
      startDate: '',
      endDate: '',
      myChart: null,
    };
  },
  watch: {
    block_code: {
      handler(val) {
        if (val) {
          this.getHistoryData();
        }
      },
      deep: true,
    },
  },
  methods: {
    async getHistoryData() {
      const res = await getCompanyHistory(this.block_type, this.block_code);
      if (res.status_code !== 0) {
        Apis.Toast.show('暂未查询到相关信息');
        return;
      } else {
        const chartData = this.createChartData(res.data.score_list);
        if (res.data.score_list.length > 1) {
          this.startDate = changeStringIntoDate(res.data.score_list[0].report_date, 2);
          this.endDate = changeStringIntoDate(
            res.data.score_list[res.data.score_list.length - 1].report_date,
            2
          );
          this.option.axis.forEach(element => {
            if (element.position === 'left') {
              element.min = this.findMinScoreItem(res.data.score_list).toFixed();
              element.max = this.findMaxScoreItem(res.data.score_list).toFixed();
            }
          });
        }
        this.option.data[0].originData = chartData;
        try {
          !this.myChart && (this.myChart = window.D3Charts.init('chart'));
          this.myChart.setOption(this.option);
        } catch (error) {
          errorReport({
            name: `画图报错${error.name}`,
            message: error.message,
            stack: error.stack,
            category: 'js',
          });
        }
      }
    },
    createChartData(list) {
      const chartData = [];
      if (list && list.length > 0) {
        list.forEach(item => {
          chartData.push({
            x: item.score,
            date: changeStringIntoDate(item.report_date),
          });
        });
      }
      return chartData;
    },
    findMaxScoreItem(list) {
      let result = 0;
      list.forEach(item => {
        if (item.score >= result) {
          result = item.score;
        }
      });
      return result + 1;
    },
    findMinScoreItem(list) {
      let result = 100;
      list.forEach(item => {
        if (item.score <= result) {
          result = item.score;
        }
      });
      return result - 1;
    },
  },
  mounted() {
    if (this.block_type) {
      this.getHistoryData();
    }
  },
};
</script>

<style lang="less">
.diagnosis-line-chart {
  .diagnosis-line-chart-image {
    width: 310px;
    height: 60px;
  }
  .diagnosis-line-chart-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .gray-text {
      font-size: 24px;
      color: #b3b3b3;
      transform: scale(0.8);
      transform-origin: bottom;
    }
  }
}
</style>
